<template>
	<div @scroll="handleScroll" ref="scrollRef" class="scroll-box">
		<slot></slot>
	</div>
</template>

<script>
export default {
	props: {
		listen: Boolean
	},
	watch: {
		listen(val) {
			const { scrollRef } = this.$refs
			if (val && scrollRef) {
				this.isEnd(scrollRef)
			}
		}
	},
	mounted() {
		if (this.listen) {
			this.isEnd(this.$refs.scrollRef)
		}
	},
	methods: {
		handleScroll(e) {
			if (!this.listen) {
				return
			}
			this.isEnd(e.target)
		},

		isEnd(target) {
			const { scrollTop, offsetHeight, clientHeight, scrollHeight } = target
			if (scrollTop + offsetHeight > scrollHeight - 20) {
				console.log('scroll-end')
				this.$emit('scroll-end')
			}
		},

		scrollToTop() {
			this.$refs.scrollRef.scrollTop = 0
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.scroll-box {
	overflow-y: auto;
}
</style>
